<template>
	<div>
		<!-- 展示订单详情的结构 -->
		<el-card class="box-card">
			<!-- 卡片头部 -->
			<template #header>
				<div class="detail">挂号详情</div>
			</template>
			<!-- 卡片身体 -->
			<div class="top">
				<div class="tag">
					<el-tag type="success">
						<el-icon><Select /></el-icon>
						<span>{{ orderInfo?.param.orderStatusString }}</span>
					</el-tag>
				</div>
				<div class="info">
					<img src="@/assets/images/code_app.png" alt="">
					<div>
						<p>微信 关注 “北京114预约挂号”</p>
						<p>“快速预约挂号”</p>
					</div>
				</div>
			</div>
			<div class="bottom">
				<!-- 左侧订单详情 -->
				<div class="left">
					<el-descriptions :column="1" border>
						<el-descriptions-item>
							<template #label>
								<div>
									就诊人信息
								</div>
							</template>
							{{ orderInfo?.patientName }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div>
									就诊日期
								</div>
							</template>
							{{ orderInfo?.reserveDate }} {{ orderInfo?.reserveTime ? "下午" : "上午" }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div>
									就诊医院
								</div>
							</template>
							{{ orderInfo?.hosname }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div>
									就诊科室
								</div>
							</template>
							{{ orderInfo?.depname }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div>
									医生职称
								</div>
							</template>
							{{ orderInfo?.title }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div>
									医事服务费
								</div>
							</template>
							<span style="color: red;">{{ orderInfo?.amount }}元</span>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div>
									挂号单号
								</div>
							</template>
							{{ orderInfo?.outTradeNo }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div>
									挂号时间
								</div>
							</template>
							{{ orderInfo?.createTime }}
						</el-descriptions-item>
					</el-descriptions>
					<div class="btn">
						<el-popconfirm v-if="orderInfo?.orderStatus !== -1" @confirm="cancelOrder" title="确定取消订单吗？">
							<template #reference>
								<el-button>取消预约</el-button>
							</template>
						</el-popconfirm>
						<el-button @click="wechatPay" v-if="!orderInfo?.orderStatus" type="primary">支付</el-button>
					</div>
				</div>
				<!-- 右侧注意事项 -->
				<div class="right">
					<el-card>
						<template #header>
							<div>
								<span>注意事项</span>
							</div>
						</template>
						<p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
						<p>2.【取号】就诊当天需在 {{ orderInfo?.fetchTime }} 在 {{ orderInfo?.fetchAddress }} 取号，未取号视为爽约，该号不退不换；</p>
						<p>3.【退号】在 {{ orderInfo?.quitTime }} 前可在线退号，预期将不可办理退号退费；</p>
						<p>4.北京 114 预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请与就诊当日，携带预约挂号所使用的有效身份证件到院取号；</p>
						<p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
					</el-card>
				</div>
			</div>
		</el-card>
		<!-- 展示支付二维码的结构 -->
		<!-- 对话框是通过 v-model 控制显示与隐藏 -->
		<el-dialog width="300" v-model="showPay" title="微信支付">
			<!-- 支付需要的二维码图片 -->
			<img :src="imgUrl" alt="">
			<p>请使用微信扫一扫</p>
			<p>扫描二维码支付</p>
			<!-- 对话框底部插槽传递结构 -->
			<template #footer>
				<el-button @click="showPay = false">关闭窗口</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
defineOptions({
	name: "Detail"
})
let props = defineProps(["id"])
// 引入图标
import { Select } from "@element-plus/icons-vue"
// 引入接口
import { reqCancelOrder, reqCreateNative, reqOrderInfo, reqPayStatus } from "@/api/user";
import { CancelOrderData, CreateNativeData, OrderInfo, OrderInfoData } from "@/api/user/type";
import { onMounted, ref, watch } from "vue";
// 字符串转二维码插件
// @ts-ignore
import QRCode from "qrcode"
import { ElMessage } from "element-plus";


// 接收订单数据
let orderInfo = ref<OrderInfo>()
// 是否显示支付对话框
let showPay = ref<boolean>(false)
// 存储生成的二维码字符串
let imgUrl = ref<string>()
// 存储定时器
let timer = ref();


// 获取订单请求
async function getOrderInfo() {
	let result: OrderInfoData = await reqOrderInfo(props.id)
	if (result.code === 200) {
		orderInfo.value = result.data
	}
}
// 取消订单请求
async function getCancelOrder() {
	let result: CancelOrderData = await reqCancelOrder(props.id)
	if (result.code === 200) {
		// 再次获取数据（更新订单状态）
		getOrderInfo()
	}
}
// 下单获取二维码请求
async function getNative() {
	let result: CreateNativeData = await reqCreateNative(props.id)
	if (result.code === 200) {
		// 将字符串转化为二维码
		imgUrl.value = await QRCode.toDataURL(result.data.codeUrl)
		// 循环发请求问询订单状态
		timer.value = setInterval(async () => {
			let result: any = await reqPayStatus(props.id)
			if (result.code === 200) {
				// 如果支付成功
				if (result.data) {
					// 关闭支付页面
					showPay.value = false
					// 再次获取订单数据（更新订单状态）
					getOrderInfo()
					// 显示支付成功提示框
					ElMessage({
						type: "success",
						message: "支付成功！"
					})
					// 清除定时器
					clearInterval(timer.value)
				}
			}
		}, 2000)
	}
}
// 点击确认取消订单的回调
function cancelOrder() {
	getCancelOrder();
}
// 点击支付的回调
function wechatPay() {
	showPay.value = true
	getNative()
}


// 监视 showPay 属性，当支付界面消失后关闭定时器
watch(() => showPay.value, () => {
	if (showPay.value === false) {
		clearInterval(timer.value)
	}
})
// 组件挂载完毕发送请求
onMounted(() => {
	getOrderInfo();
})
</script>

<style scoped lang="scss">
.box-card {
	.top {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #ccc;

		.tag {
			display: flex;

			span {
				margin-left: 5px;
			}
		}

		.info {
			display: flex;

			img {
				width: 40px;
				margin-right: 5px;
			}

			p {
				font-style: 12px;
				line-height: 20px;
			}
		}
	}

	.bottom {
		display: flex;
		padding: 10px 0;

		.left {
			flex: 4;
			margin-right: 20px;

			.btn {
				margin-top: 10px;
			}
		}

		.right {
			flex: 6;

			p {
				line-height: 30px;
			}
		}
	}
}

:deep(.el-dialog__body) {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;

	p {
		line-height: 30px;
	}
}
</style>